<!--  -->
<template>
  <div class="head">
    <div class="nav"></div>
    <div class="w15">
      <a href="#/mainPage">
        <div class="logo"></div>
      </a>
    </div>
    <div class="nav-text">
      美食城
    </div>
    <div class="text-center">
      <div class="searchWarp clearfix">
        <div class="searchType">
          <span>全部</span>
          <span class="m120px"> </span>
        </div>
        <input type="text" placeholder="请输入搜索内容" class="searchInput" />
        <div class="searchBtn">
          <i class="el-icon-search"></i>
          <span class="ml5px">搜索</span>
        </div>
        <ul class="headSearchTypeList" style="display: block;">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu
              slot="dropdown"
              style="width: 80px; text-align: center"
            >
              <el-dropdown-item>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <li class="searchTypeItem"></li>
        </ul>
      </div>
    </div>

    <div class="user-w15">
      <div class="user-avatar">
        <span
          class="el-avatar el-avatar--circle"
          style="height: 50px; width: 50px; line-height: 50px;"
        >
          <img src="../views/img/defaultAvatar.jpg" alt="" />
        </span>
      </div>

      <div class="user-name">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            111 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu
            slot="dropdown"
            style="width: 150px; text-align: center"
          >
            <el-dropdown-item icon="el-icon-s-custom"
              >首页门户</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-office-building"
              >商家入驻</el-dropdown-item
            >
            <a href="#/backStage">
              <el-dropdown-item icon="el-icon-setting"
                >商家后台</el-dropdown-item
              >
            </a>

            <el-dropdown-item icon="el-icon-switch-button"
              ><span>退出登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-bar",
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.head {
  /* position: relative; */

  height: 80px;
  width: 100%;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  /* background-color: rgba(247, 239, 239, 0.1); */
  /* box-shadow: 5px 5px 5px #f1efef; */
}
.nav {
  position: fixed;
  top: 0;
  left: 100px;
  z-index: 100;
}
.w15 {
  width: 20% !important;
  float: left;
}
.logo {
  width: 100%;
  height: 60px;
  background: url("../views/img/logo1.png") no-repeat;
  transform: translate(25%, 15%);
  /* margin: 0 auto; */
  background-size: contain;
}
.nav-text {
  margin-left: -50px !important;
  float: left;
  width: 20% !important;
  line-height: 80px;
  font-size: 20px;
  font-weight: bold;
  color: green;
}
.text-center {
  text-align: center !important;
  display: inline-block;
}
.searchWarp {
  height: 40px;
  /* line-height: 80px; */
  transform: translate(0, 50%);
  /* display: inline-block; */
  vertical-align: middle;
  border: 2.5px solid #00a551;
  font-size: 12px;
  position: relative;
  box-sizing: border-box;
}
.searchInput {
  width: 300px;
  height: 36px;
  line-height: 36px;
  float: left;
  border: none;
  outline: none;
  padding: 0 50px;
  box-sizing: border-box;
  /* text-align: center; */
}
.searchType {
  padding: 10px 20px;
  position: relative;
  /* border-right: 1px solid #f3f3f3; */
  float: left;
  cursor: pointer;
}
.headSearchTypeList {
  /* background-color: #fff; */
  position: absolute;
  top: 5px;
  left: 20px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  /* cursor: pointer; */
  /* box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 40%); */
  z-index: 100;
  display: none;
}
.headSearchTypeList .searchTypeItem {
  padding: 0 20px;
}
li {
  list-style: none;
}

.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}

/* .searchType > span::after {
  position: absolute;
  content: "";
  top: 12px;
  left: 60px;
  width: 5px;
  height: 5px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  transform: rotate(45deg);
} */
.searchBtn {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  background-color: #00a551;
  /* float: left; */
  padding: 0px 20px;
  color: #fff;
  cursor: pointer;
}
.ml5px {
  text-align: center;
  margin-left: 5px !important;
}
.clearfix {
  zoom: 1;
}
.ml20px {
  margin-left: 20px !important;
}

.user-w15 {
  width: 17% !important;
  float: left;
  display: flex;
}
.user-avatar {
  margin-top: 19px;
  width: 150px;
  position: absolute;
  right: 50px;
}
.user-name {
  color: white;
  font-size: 15px;
  line-height: 80px;
  /* float: right; */
  width: 75px;
  position: absolute;
  right: 50px;
  cursor: pointer;
}
</style>
